<template>
  <div
    v-if="cover"
    class="topic-details"
    :style="{backgroundColor:bgColor}"
  >
    <div class="topic-container">
      <div class="topic-bg">
        <img :src="cover">
      </div>
      <div class="toppic-title">
        <h2>{{title}}</h2>
        <p class="desc">{{desc}}</p>
        <p></p>
      </div>
      <div
        class="pic-container"
        v-for="t in topicOneDataArticles"
        :key="t.id"
        @click="gotoDetailsArticles(t.content_id,t.category)"
      >
        <div class="imgs">
          <img :src="t.img_url">
          <p>{{t.title}}</p>
        </div>
        <p class="forward">{{t.forward}}</p>
        <div class="author">
          <span>{{t.author.user_name}}</span>
          <div>
            <span></span>
            <span></span>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopicDetails",

  data() {
    return {
      topicDetailsList: [],
      bgColor: "",
      title: "",
      desc: "",
      cover: "",
    };
  },

  mounted() {
    let { id } = this.$route.query;
    this.getTopDetailsData(id);
  },
  computed: {
    // cover() {
    //   return this.topicDetailsList.json_content.special.cover;
    // },
    topicOneDataArticles() {
      return this.topicDetailsList.json_content.oneDataArticles;
    },
  },

  methods: {
    async getTopDetailsData(id) {
      let { data } = await this.$axios.get(
        `https://apis.netstart.cn/one/topic/htmlcontent/${id}`
      );
      this.topicDetailsList = data.data;
      console.log(this.topicDetailsList);
      this.bgColor = this.topicDetailsList.bg_color;
      this.cover = this.topicDetailsList.json_content.special.cover;
      this.title = this.topicDetailsList.title;
      this.desc = this.topicDetailsList.share_list.wx.desc;
      // console.log(this.bgColor);
    },
    gotoDetailsArticles(id,category){
      // let {category} = this.$route.query;
      this.$router.push({
       path: "/detail",
        query: {
          id,
          category,
        },
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.topic-details {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  z-index: 555;
  background: #fff;
  box-sizing: border-box;
  // padding:  0 10px;

  .topic-bg {
    img {
      display: block;
      width: 100vw;
    }
  }
  .topic-container {
    .toppic-title{
      padding: 10px 10px;

      h2{
        font-size: 20px;
      }
      .desc{
        font-size: 12px;
        margin-top: 10px;
      }
    }
    .pic-container {
      // font-weight: 200;
      margin: 20px 10px;
      border: 1px solid #ccc;
      .imgs {
        position: relative;
        &::after{
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          content: "";
          width: 100%;
          height: 100%;
          background-color:rgba(0,0,0,0.3);
          z-index:1;
          

        }
        img {
          display: block;
          width: 100%;
        }
        p{
          position: absolute;
          left: 10px;
          bottom: 20px;
          font-size: 18px;
          color:#fff;
          z-index:2;


        }
      }
      .forward{
        padding: 20px 10px;
        line-height:20px;
        background-color: #fff;
      }
      .author{
        padding: 10px 10px;
        font-size: 12px;
        color: rgb(173, 158, 158);
        background-color: #fff;

      }
    }
  }
}
</style>